<%--
  Created by IntelliJ IDEA.
  User: sunhao
  Date: 2015/9/28 0028
  Time: 下午 1:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>

<html>
<head>
  <title>给学生配置课程</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <%--<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">--%>
  <link href="/static/bui/css/bs3/dpl.css" rel="stylesheet" type="text/css"/>
  <link href="/static/bui/css/bs3/bui.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="demo-content">
  <style type="text/css">
    .btns {
      margin-top: 20px;
    }

    .button {
      margin-bottom: 0px;
    }

    .bui-select-list {
      overflow: auto;
    }
  </style>
  <label class="control-label" style="float:left;margin-top:50px;margin-left:30px"><b>学生信息：</b></label>

  <div style="width:300px;float:left;margin-left:0px;margin-top:100px">
    <div class="row">
      <div class="control-group span8">
        <label class="control-label"><b>姓名：</b></label>

        <div class="controls">
          ${student.name}
        </div>
      </div>
    </div>
    <div class="row">
      <div class="control-group span8">
        <label class="control-label"><b>身份证：</b></label>

        <div class="controls">
          ${student.identityCard}
        </div>
      </div>
    </div>
    <div class="row">
      <div class="control-group span8">
        <label class="control-label"><b>电话：</b></label>

        <div class="controls">
          ${student.phone}
        </div>
      </div>
    </div>
  </div>
  <div id="list1" class="span5" style="margin-top:100px">
    <span><b>可绑定的课程：</b></span>
  </div>
  <div class="btns centered span2">
    <button class="button button-small" type="button" id="J_BtnRight" style="margin-top:140px">>></button>
    <button class="button button-small" type="button" id="J_BtnLeft" style="margin-top:140px"><<</button>
  </div>

  <div id="list2" class="span5" style="margin-top:100px">
    <span><b>已拥有的课程：</b></span>
  </div>
  <script type="text/javascript" src="/static/bui/js/jquery-1.8.1.min.js"></script>
  <script type="text/javascript" src="/static/bui/js/bui.js"></script>
  <script type="text/javascript" src="/static/bui/js/config.js"></script>
  <script type="text/javascript" src="/static/js/sea.js"></script>
  <script type="text/javascript" src="/static/js/cxdate.js"></script>
  <script type="text/javascript">

    BUI.use(['bui/list', 'bui/overlay'], function (List, overlay) {

      var items1 = [
                <c:forEach items="${noLessons}" var="nr">
                {text: '${nr.name}', _id: '${nr._id}'},
                </c:forEach>
              ],
              items2 = [
                <c:forEach items="${lessons}" var="r">
                {text: '${r.name}', _id: '${r._id}'},
                </c:forEach>
              ],
              list1 = new List.Listbox({
                elCls: 'bui-select-list',//默认是'bui-simple-list'
                render: '#list1',
                items: items1,
                height: 350
              }),
              list2 = new List.Listbox({
                elCls: 'bui-select-list',//默认是'bui-simple-list'
                render: '#list2',
                items: items2,
                height: 350
              });
      list1.render();
      list2.render();
      $('#J_BtnRight').on('click', function () {
        var selections1 = list1.getSelection();
        list1.removeItems(selections1);
        var ids = [];
        BUI.each(selections1, function (item) {
          ids.push(item._id)
        });
        if (ids.length) {
          $.ajax({
            type: 'POST',
            url: '/student/bindLesson?studentId=${student._id}&_ids=' + ids,
            success: function (msg) {
              if (msg == 'success') {
                msg = "绑定课程成功！";
              }
              list2.addItems(selections1);
              BUI.Message.Show({
                msg: msg,
                icon: 'success',
                buttons: [],
                autoHide: true,
                autoHideDelay: 1000
              });
            }
          })
        }
      });
      $('#J_BtnLeft').on('click', function () {
        var selections2 = list2.getSelection();
        list2.removeItems(selections2);
        var ids = [];
        BUI.each(selections2, function (item) {
          ids.push(item._id)
        });
        if (ids.length) {
          $.ajax({
            type: 'POST',
            url: '/student/removeLesson?studentId=${student._id}&_ids=' + ids,
            success: function (msg) {
              if (msg == 'success') {
                msg = "解除课程成功！";
              }
              list1.addItems(selections2);
              BUI.Message.Show({
                msg: msg,
                icon: 'success',
                buttons: [],
                autoHide: true,
                autoHideDelay: 1000
              });
            }
          })
        }
      });
    });

  </script>
</div>
</body>
</html>

